<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));
  var data = [132, 324, 327, 452, 365, 145, 326];
  var change = [7.2, -2.6, 4.7, -3.7, -5.4, -0.5, 3.4];
  //遍历change里面元素的正负定义一个矢量路径的数组
  //定义两个上下箭头的矢量路径
  var up = 'path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z';
  var down = 'path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z';
  // 根据 change中的正负决定箭头类型
  var path = change.map((i) => {
    // return (i > 0 ? up : down)
    return 'image://' + (i > 0 ? './up.png' : './down.png')
  })
  console.log(path)
  let option = {
    tooltip: {
      trigger: 'axis',
      formatter(arr) {
        let obj1 = arr[0],
          obj2 = arr[1];
        let n = change[obj2.dataIndex];
        // console.log(arr)
        return `
          ${obj1.axisValueLabel}
          <br>
          <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#61a0a8;"></span>
          本周当日是：${obj1.value}<br>
          <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${n > 0 ? 'red' : 'green'};"></span>
          同比${n > 0 ? '增加' : '减少'}为:${n}
        `
      }
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {},
    series: [{
      name: '本周当日',
      type: 'bar',
      data: data,
      // label: {
      //   show: true,
      //   formatter() {
      //     return '<i>555</i>'
      //   }
      // }
    }, {
      name: "同比增加",
      type: 'pictorialBar',
      symbol: function (value, obj) {
        console.log(arguments)
        return path[obj.dataIndex]
      },
      symbolOffset: [0, '-100%'],
      symbolSize: [20, 20],
      symbolPosition: 'end',
      data: data,
      label: {
        show: true,
        position: 'top',
        // color: 'red'
        formatter(obj) {
          let n = change[obj.dataIndex]
          return n > 0 ? [`{qqq|${n}}`, `{eee|hello}`] : `{www|${n}}`
        },
        rich: {
          qqq: {
            color: 'red'
          },
          www: {
            color: 'green'
          },
          eee: {
            backgroundColor: 'red',
            color: '#fff'
          }
        }
      }
    }]
  }
  charts.setOption(option)
</script>